﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>test 正则表达式</title>
    <style>
        .outside
        {
            height: 1000px;
            border: solid 1px #00f;
        }
        .textArea
        {
            height: 200px;
        	width:100%;
        }
        .textAreaSmall
        {
        	height:50px;
        	width:100%;
        }
        .test
        {
            width: 100px;
            height: 30px;
        }
        .inputTargetStr
        {
        	border:solid 1px #444;
        	height:500px;
        }
    </style>

    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" language="javascript">
        function testReg(regStr, str) {
            try {
                var reg = new RegExp(regStr);
                return reg.test(str);
            } catch (e) {
                alert(e.message);
                return false;
            }
        }
        function matchReg(strTarget, reg) {
            var curRegExp = reg
            if (typeof reg == "string") {
                curRegExp = new RegExp(reg, "g");
            }
            try{
                return strTarget.match(curRegExp);
            } catch (e) {
                alert(e.message);
                return null;
            }
        }
        $(function() {
            $("#test").click(function() {
                var $output = $("#targetOutput");
                $output.css("color", "#000");
                $output.text("");
                var regStr = $("#regInput").val();
                var targetStr = $("#targetInput").val();
                var outputStr = matchReg(targetStr, regStr);
                if (outputStr != null) {
                    $output.text(outputStr.join("\r\n"));
                } else {
                    $output.css("color", "red");
                    $output.text("Test RegExp Failed");
                }
            })
        })
    </script>

</head>
<body>
    <div>
    <span class="labelS">targetStr:</span>
    <textarea type="text" class="textArea" id="targetInput"></textarea>
    </div>
    <div>
    <span class="labelS">RegExp:</span>
    <textarea type="text" class="textAreaSmall" id="regInput"></textarea>
    </div>
    <input type="button" class="test" id="test" value="test_Reg" />
    <div class="textArea inputTargetStr" id="targetOutput">
    </div>
</body>
</html>
